<template>
  <el-drawer title="数据映射配置"
             :visible.sync="drawerVisible"
             size="80%"
             append-to-body>
    <div class="app-container">
      <el-tabs v-model="editableTabsValue" type="card" editable @edit="handleTabsEdit">
        <el-tab-pane
          :key="item.name"
          v-for="(item, index) in dataMappingConfig"
          :label="item.tableNameCN"
          :name="item.dataSourceKey+item.targetTableName">
          {{ item.content }}
        </el-tab-pane>
      </el-tabs>
    </div>

  </el-drawer>
</template>

<script>
export default {
  name: "start-data-mapping-config",
  data() {
    return {
      drawerVisible: false,
      editableTabsValue: '',
      dataMappingConfig: {}
    }
  },
  methods: {
    show(config) {
      config.dataMappingConfig = config.dataMappingConfig ? config.dataMappingConfig : {}
      this.dataMappingConfig = config.dataMappingConfig
      this.drawerVisible = true;
    }
  },
  handleTabsEdit(targetName, action) {
    if (action === 'add') {
      let newTabName = ++this.tabIndex + '';
      this.editableTabs.push({
        title: 'New Tab',
        name: newTabName,
        content: 'New Tab content'
      });
      this.editableTabsValue = newTabName;
    }
    if (action === 'remove') {
      let tabs = this.editableTabs;
      let activeName = this.editableTabsValue;
      if (activeName === targetName) {
        tabs.forEach((tab, index) => {
          if (tab.name === targetName) {
            let nextTab = tabs[index + 1] || tabs[index - 1];
            if (nextTab) {
              activeName = nextTab.name;
            }
          }
        });
      }

      this.editableTabsValue = activeName;
      this.editableTabs = tabs.filter(tab => tab.name !== targetName);
    }
  },
}
</script>

<style scoped>

</style>
